<script>
import { tabbarList } from '@/router/tabbar';
import { Tabbar, TabbarItem } from 'vant';
import { mapStores } from 'pinia'
import { useAppStore } from '@/stores/app';
import useContactsStore from '@/stores/contacts';


export default {
  components: {
    Tabbar,
    TabbarItem
  },
  computed: {
    ...mapStores(useAppStore, useContactsStore),
  },
  data() {
    return {
      tabbarList
    };
  },
  methods: {
    calcBadge(name) {
      const { unread } = this.appStore
      switch (name) {
        case '消息':
          return unread > 0 ? (unread >= 99 ? '99+' : unread) : undefined
        case '通讯录':
          const count = this.contactsStore.waitingConfirmRequests.length
          return count > 0 ? (count >= 99 ? '99+' : count) : undefined
        default:
          return undefined
      }
    }
  }
}
</script>

<template>
  <div class="app-footer">
    <img src="../../assets/images/tabbar.png" alt="">
    <Tabbar route :fixed="false" :border="false">
      <TabbarItem
        v-for="item in tabbarList"
        :key="item.path"
        :to="item.path"
        :badge="calcBadge(item.name)"
      >
        <span>{{ item.name }}</span>
        <template #icon="props">
          <img
            :style="{
              height: item.name ? '30px' : '60px',
              transform: item.name ? undefined : 'translateY(-6px)'
            }"
            :src="props.active
              ? item.activeIcon
              : item.inactiveIcon"
          />
        </template>
      </TabbarItem>
    </Tabbar>
  </div>
</template>

<style lang="less" scoped>
.app-footer {
  position: relative;
  padding-top: 10px;

  >img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 375px;
  }

  .van-tabbar {
    position: relative;
    z-index: 1;
  }
}
</style>
